<template>
  <RiskRecordSearchCom></RiskRecordSearchCom>

  <el-table
    v-loading="riskRecordListLoading"
    :data="riskRecordList.arr"
    stripe
    highlight-current-row
    max-height="440"
    border
  >
    <el-table-column prop="id" label="记录编号"></el-table-column>
    <el-table-column prop="stationName" label="站场"></el-table-column>
    <el-table-column prop="pipelineName" label="管线"></el-table-column>
    <el-table-column prop="type" label="参数类型">
      <template #default="scope">
        {{ typeOptions[scope.row.type].label }}
      </template>
    </el-table-column>
    <el-table-column prop="value" label="参数值">
      <template #default="scope">
        <el-tag size="small">{{ scope.row.value }} {{ typeOptions[scope.row.type].unit }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="triggerType" label="触发类型">
      <template #default="scope">
        <el-tag v-if="scope.row.triggerType === 1" type="danger">
          <el-space :size="2">
            <span>超出上限</span>
            <svg-icon icon-name="icon-shuzhishangsheng"></svg-icon>
          </el-space>
        </el-tag>
        <el-tag v-else type="danger">
          <el-space :size="2">
            <span>低于下限</span>
            <svg-icon icon-name="icon-shuzhixiajiang"></svg-icon>
          </el-space>
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="recordTime" label="记录时间" width="200"></el-table-column>
  </el-table>

  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    :page-sizes="[9, 12, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :background="true"
    class="pagination"
    @change="getRiskRecordList"
  />
</template>
<script setup name="RiskRecordManagePage">
import RiskRecordSearchCom from '../components/RiskRecordSearchCom.vue'
import { onMounted } from 'vue'
import { typeOptions } from '../options/typeOption'
import { useRiskRecord } from '../hooks/useRiskRecord'
const {
  riskRecordListLoading,
  currentPage,
  pageSize,
  total,
  riskRecordList,
  getRiskRecordList,
  getStatisticRiskRecord
} = useRiskRecord()
onMounted(() => {
  getRiskRecordList()
  getStatisticRiskRecord()
})
</script>
<style lang="less" scoped>
.pagination {
  margin-top: 10px;
}
</style>
